接續著昨天，今天我們要來介紹其他找節點的方式。

Node.lastChild
可以取得節點的最後一個子節點，如果沒有的話就回傳 null。跟昨天介紹的 firstChild 一樣，會包含空白節點：

<p>
    <span>span 1</span>
    <span>span 2</span>
    <span>span 3</span>
</p>

var p = document.querySelector('p')
console.log(p.lastChild.textContent) // "" (空白字元)

將空白字元移除後：

<p><span>span 1</span><span>span 2</span><span>span 3</span></p>

var p = document.querySelector('p')
console.log(p.lastChild.textContent) // "span 3"

Node.parentNode
可以用來取得父元素，可能回傳一個元素節點、根節點、DocumentFragment 節點。

<p><span>span 1</span><span>span 2</span><span>span 3</span></p>

var el = document.querySelector('span')
console.log(el.parentChild.Nodename) // "p"

Node.previousSibling
可以取得同層的前一個節點，如果沒有的話就回傳 null

<p><span>span 1</span><span>span 2</span><span>span 3</span></p>

var el = document.querySelector('span')
console.log(el.previousSibling) // null

這邊會回傳 null ，因為 querySelector 會選取到第一個元素，除非使用 querySelectorAll

var el2 = document.querySelectorAll('span)[1] // 要選取到第二個符合條件的元素。
console.log( el2.previousSibling) // "span 1"

Node.nextSibling
可以取得同層的下一個的節點，如果符合條件的元素已經是最後一個了，就會回傳 null

var el = document.querySelectorAll('span')[1]
console.log(el.nextSibling) // "span 3"

這些就是基本找節點的方式，希望大家不會在 html 的大海迷路了～
我們明天見啦！